<template>
  <div class="resources-container">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索学习资源..."
          size="large"
          class="search-input"
          @keyup.enter="handleSearch"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
          <template #append>
            <el-button @click="handleSearch">搜索</el-button>
          </template>
        </el-input>
        
        <!-- 上传资源按钮 -->
        <div class="upload-action" v-if="isLoggedIn">
          <el-button type="primary" size="large" @click="showUploadDialog = true">
            <el-icon><Upload /></el-icon>
            上传资源
          </el-button>
        </div>
      </div>
      
      <div class="filter-bar">
        <div class="filter-item">
          <span class="filter-label">分类：</span>
          <el-select v-model="selectedCategory" placeholder="选择分类" @change="handleFilter" clearable class="filter-select">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="category in categories"
              :key="category.categoryId"
              :label="category.categoryName"
              :value="category.categoryId"
            ></el-option>
          </el-select>
        </div>
        
        <div class="filter-item">
          <span class="filter-label">排序：</span>
          <el-select v-model="sortBy" placeholder="排序方式" @change="handleFilter" class="filter-select">
            <el-option label="最新上传" value="uploadTime"></el-option>
            <el-option label="下载量" value="downloadCount"></el-option>
            <el-option label="评分" value="rating"></el-option>
            <el-option label="文件大小" value="fileSize"></el-option>
          </el-select>
        </div>
        
        <div class="filter-item">
          <span class="filter-label">文件类型：</span>
          <el-select v-model="fileType" placeholder="文件类型" @change="handleFilter" clearable class="filter-select">
            <el-option label="全部" value=""></el-option>
            <el-option label="PDF" value="pdf"></el-option>
            <el-option label="Word" value="doc,docx"></el-option>
            <el-option label="PPT" value="ppt,pptx"></el-option>
            <el-option label="视频" value="mp4,avi,mkv"></el-option>
            <el-option label="音频" value="mp3,wav"></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <!-- 资源列表 -->
    <div class="resources-content">
      <div class="view-controls">
        <div class="view-mode">
          <el-radio-group v-model="viewMode" @change="handleViewModeChange">
            <el-radio-button value="grid">
              <el-icon><Grid /></el-icon>
              网格视图
            </el-radio-button>
            <el-radio-button value="list">
              <el-icon><List /></el-icon>
              列表视图
            </el-radio-button>
          </el-radio-group>
        </div>
        
        <div class="results-info">
          <span>共找到 {{ total }} 个资源</span>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="6" animated />
      </div>

      <!-- 网格视图 -->
      <div v-else-if="viewMode === 'grid'" class="resources-grid">
        <div
          v-for="resource in resources"
          :key="resource.resourceId"
          class="resource-card"
          @click="viewResourceDetail(resource)"
        >
          <div class="card-header">
            <div class="file-icon">
              <el-icon><component :is="getFileIcon(resource.fileType)" /></el-icon>
            </div>
            <div class="card-actions">
              <el-dropdown @command="handleResourceAction">
                <el-icon class="more-icon"><MoreFilled /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{action: 'download', resource}">
                      <el-icon><Download /></el-icon>
                      下载
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'favorite', resource}">
                      <el-icon><Star /></el-icon>
                      收藏
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'share', resource}">
                      <el-icon><Share /></el-icon>
                      分享
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
          
          <div class="card-content">
            <h3 class="resource-title">{{ resource.title }}</h3>
            <p class="resource-description">{{ resource.description }}</p>
            
            <div class="resource-meta">
              <div class="meta-item">
                <el-tag size="small" type="primary">{{ resource.categoryName }}</el-tag>
              </div>
              <div class="meta-item">
                <el-icon><User /></el-icon>
                <span>{{ resource.uploaderName }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ formatDate(resource.uploadTime) }}</span>
              </div>
            </div>
            
            <div class="resource-stats">
              <div class="stat-item">
                <el-icon><Download /></el-icon>
                <span>{{ resource.downloadCount }}</span>
              </div>
              <div class="stat-item">
                <el-icon><View /></el-icon>
                <span>{{ resource.viewCount || 0 }}</span>
              </div>
              <div class="stat-item rating-item">
                <span class="rating-value">★{{ (parseFloat(resource.rating) || 0).toFixed(1) }}</span>
              </div>
            </div>
          </div>
          
          <div class="card-footer">
            <div class="file-info">
              <span class="file-size">{{ formatFileSize(resource.fileSize) }}</span>
              <span class="file-type">{{ resource.fileType?.toUpperCase() }}</span>
            </div>
            <div class="action-buttons">
              <el-button 
                size="small" 
                :type="resource.isFavorited ? 'warning' : 'default'"
                :class="{ 'favorited': resource.isFavorited }"
                @click.stop="favoriteResource(resource)"
              >
                <el-icon><Star /></el-icon>
                {{ resource.isFavorited ? '已收藏' : '收藏' }}
              </el-button>
              <el-button type="primary" size="small" @click.stop="downloadResource(resource)">
                立即下载
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表视图 -->
      <div v-else class="resources-list">
        <el-table :data="resources" style="width: 100%" @row-click="viewResourceDetail">
          <el-table-column prop="title" label="资源名称" min-width="200">
            <template #default="{ row }">
              <div class="list-title">
                <el-icon class="file-icon-small">
                  <component :is="getFileIcon(row.fileType)" />
                </el-icon>
                <span>{{ row.title }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="categoryName" label="分类" width="120">
            <template #default="{ row }">
              <el-tag size="small" type="primary">{{ row.categoryName }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="uploaderName" label="上传者" width="120" />
          
          <el-table-column prop="fileSize" label="文件大小" width="100">
            <template #default="{ row }">
              {{ formatFileSize(row.fileSize) }}
            </template>
          </el-table-column>
          
          <el-table-column prop="downloadCount" label="下载量" width="100" />
          
          <el-table-column prop="rating" label="评分" width="120">
            <template #default="{ row }">
              <span class="rating-score">★{{ (parseFloat(row.rating) || 0).toFixed(1) }}</span>
            </template>
          </el-table-column>
          
          <el-table-column prop="uploadTime" label="上传时间" width="120">
            <template #default="{ row }">
              {{ formatDate(row.uploadTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="{ row }">
              <el-button size="small" @click.stop="downloadResource(row)">
                <el-icon><Download /></el-icon>
                下载
              </el-button>
              <el-button 
                size="small" 
                :type="row.isFavorited ? 'warning' : 'default'"
                :class="{ 'favorited': row.isFavorited }"
                @click.stop="favoriteResource(row)"
              >
                <el-icon><Star /></el-icon>
                {{ row.isFavorited ? '已收藏' : '收藏' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[12, 24, 48, 96]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 上传资源对话框 -->
    <el-dialog
      v-model="showUploadDialog"
      title="上传学习资源"
      width="600px"
      :before-close="handleUploadDialogClose"
    >
      <el-form :model="uploadForm" :rules="uploadRules" ref="uploadFormRef" label-width="100px">
        <el-form-item label="资源标题" prop="title">
          <el-input v-model="uploadForm.title" placeholder="请输入资源标题" />
        </el-form-item>
        
        <el-form-item label="资源描述" prop="description">
          <el-input
            v-model="uploadForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入资源描述"
          />
        </el-form-item>
        
        <el-form-item label="资源分类" prop="categoryId">
          <el-select v-model="uploadForm.categoryId" placeholder="请选择分类">
            <el-option
              v-for="category in categories"
              :key="category.categoryId"
              :label="category.categoryName"
              :value="category.categoryId"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            :limit="1"
            drag
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 PDF、Word、PPT、视频、音频等格式，文件大小不超过 100MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showUploadDialog = false">取消</el-button>
          <el-button type="primary" @click="submitUpload" :loading="uploading">
            {{ uploading ? '上传中...' : '确定上传' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, watch, onActivated } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Upload, Grid, List, Download, Star, Share, MoreFilled,
  User, Calendar, View, UploadFilled, Document, VideoPlay,
  Headset, Picture, Files
} from '@element-plus/icons-vue'
import request from '@/utils/request'

export default {
  name: 'Resources',
  components: {
    Search, Upload, Grid, List, Download, Star, Share, MoreFilled,
    User, Calendar, View, UploadFilled, Document, VideoPlay,
    Headset, Picture, Files
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    
    // 响应式数据
    const loading = ref(false)
    const resources = ref([])
    const categories = ref([])
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(12)
    const viewMode = ref('grid')
    
    // 搜索和筛选
    const searchKeyword = ref('')
    const selectedCategory = ref('')
    const sortBy = ref('uploadTime')
    const fileType = ref('')
    
    // 上传对话框
    const showUploadDialog = ref(false)
    const uploading = ref(false)
    const uploadFormRef = ref()
    const uploadRef = ref()
    
    const uploadForm = reactive({
      title: '',
      description: '',
      categoryId: '',
      file: null
    })
    
    const uploadRules = {
      title: [
        { required: true, message: '请输入资源标题', trigger: 'blur' },
        { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '请输入资源描述', trigger: 'blur' },
        { min: 10, max: 500, message: '描述长度在 10 到 500 个字符', trigger: 'blur' }
      ],
      categoryId: [
        { required: true, message: '请选择资源分类', trigger: 'change' }
      ]
    }
    
    // 计算属性
    const isLoggedIn = computed(() => store.getters.getLoginStatus)
    
    // 方法
    const loadResources = async () => {
      loading.value = true
      try {
        const params = {
          page: currentPage.value,
          size: pageSize.value,
          keyword: searchKeyword.value,
          categoryId: selectedCategory.value,
          sortBy: sortBy.value,
          fileType: fileType.value
        }
        
        const response = await request.get('/resources', { params })
        resources.value = response.data.records || []
        total.value = response.data.total || 0
      } catch (error) {
        console.error('加载资源失败:', error)
        ElMessage.error('加载资源失败，请稍后重试')
        resources.value = []
        total.value = 0
      } finally {
        loading.value = false
      }
    }
    
    const loadCategories = async () => {
      try {
        const response = await request.get('/categories')
        categories.value = response.data || []
      } catch (error) {
        console.error('加载分类失败:', error)
        categories.value = []
      }
    }
    
    const handleSearch = () => {
      currentPage.value = 1
      loadResources()
    }
    
    const handleFilter = () => {
      currentPage.value = 1
      loadResources()
    }
    
    const handleViewModeChange = () => {
      // 视图模式切换时可以做一些处理
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      loadResources()
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
      loadResources()
    }
    
    const getFileIcon = (fileType) => {
      if (!fileType) return Document
      const type = fileType.toLowerCase()
      if (['pdf', 'doc', 'docx', 'txt'].includes(type)) return Document
      if (['mp4', 'avi', 'mkv', 'mov'].includes(type)) return VideoPlay
      if (['mp3', 'wav', 'flac'].includes(type)) return Headset
      if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type)) return Picture
      return Files
    }
    
    const formatFileSize = (bytes) => {
      if (!bytes) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
    
    const formatDate = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }
    
    const viewResourceDetail = (resource) => {
      // 跳转到资源详情页面
      router.push(`/resources/${resource.resourceId}`)
    }
    
    const downloadResource = async (resource) => {
      try {
        ElMessage.info('开始下载...')
        // 这里应该调用下载API
        const response = await request.get(`/resources/${resource.resourceId}/download`, {
          responseType: 'blob'
        })
        
        // 创建下载链接
        const url = window.URL.createObjectURL(new Blob([response.data]))
        const link = document.createElement('a')
        link.href = url
        link.setAttribute('download', `${resource.title}.${resource.fileType}`)
        document.body.appendChild(link)
        link.click()
        link.remove()
        window.URL.revokeObjectURL(url)
        
        ElMessage.success('下载成功')
      } catch (error) {
        console.error('下载失败:', error)
        ElMessage.error('下载失败，请稍后重试')
      }
    }
    
    const favoriteResource = async (resource) => {
      if (!isLoggedIn.value) {
        ElMessage.warning('请先登录')
        return
      }
      
      try {
        if (resource.isFavorited) {
          // 取消收藏
          await request.delete(`/resources/${resource.resourceId}/favorite`)
          resource.isFavorited = false
          ElMessage.success('已取消收藏')
        } else {
          // 添加收藏
          await request.post(`/resources/${resource.resourceId}/favorite`)
          resource.isFavorited = true
          ElMessage.success('收藏成功')
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
        // 如果是已经收藏的错误，则更新状态为已收藏
        if (error.message && error.message.includes('已经收藏')) {
          resource.isFavorited = true
          ElMessage.success('该资源已在您的收藏中')
        } else {
          ElMessage.error('操作失败，请稍后重试')
        }
      }
    }
    
    const handleResourceAction = ({ action, resource }) => {
      switch (action) {
        case 'download':
          downloadResource(resource)
          break
        case 'favorite':
          favoriteResource(resource)
          break
        case 'share':
          shareResource(resource)
          break
      }
    }
    
    const shareResource = (resource) => {
      const url = `${window.location.origin}/resources/${resource.resourceId}`
      navigator.clipboard.writeText(url).then(() => {
        ElMessage.success('链接已复制到剪贴板')
      }).catch(() => {
        ElMessage.error('复制失败')
      })
    }
    
    // 上传相关方法
    const handleFileChange = (file) => {
      uploadForm.file = file.raw
    }
    
    const beforeUpload = (file) => {
      const isValidType = ['pdf', 'doc', 'docx', 'ppt', 'pptx', 'mp4', 'avi', 'mp3', 'wav'].some(
        type => file.name.toLowerCase().endsWith(type)
      )
      const isLt100M = file.size / 1024 / 1024 < 100
      
      if (!isValidType) {
        ElMessage.error('文件格式不支持')
        return false
      }
      if (!isLt100M) {
        ElMessage.error('文件大小不能超过 100MB')
        return false
      }
      return true
    }
    
    const submitUpload = async () => {
      if (!uploadFormRef.value) return
      
      try {
        await uploadFormRef.value.validate()
        
        if (!uploadForm.file) {
          ElMessage.error('请选择要上传的文件')
          return
        }
        
        // 验证categoryId是否为有效值
        let categoryId = uploadForm.categoryId
        if (Array.isArray(categoryId)) {
          categoryId = categoryId[0] // 取数组第一个元素
        }
        
        if (!categoryId) {
          ElMessage.error('请选择资源分类')
          return
        }
        
        uploading.value = true
        
        const formData = new FormData()
        formData.append('title', uploadForm.title)
        formData.append('description', uploadForm.description)
        formData.append('categoryId', categoryId) // 确保传递的是单个值
        formData.append('file', uploadForm.file)
        
        // 上传表单数据日志已移除
        
        await request.post('/resources/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        
        ElMessage.success('上传成功')
        showUploadDialog.value = false
        resetUploadForm()
        loadResources()
      } catch (error) {
        console.error('上传失败:', error)
        ElMessage.error(error.message || '上传失败，请稍后重试')
      } finally {
        uploading.value = false
      }
    }
    
    const resetUploadForm = () => {
      Object.assign(uploadForm, {
        title: '',
        description: '',
        categoryId: '',
        file: null
      })
      if (uploadRef.value) {
        uploadRef.value.clearFiles()
      }
    }
    
    const handleUploadDialogClose = () => {
      resetUploadForm()
      showUploadDialog.value = false
    }
    
    // 生命周期
    onMounted(() => {
      loadResources()
      loadCategories()
    })
    
    // 页面激活时检查是否需要刷新
    onActivated(() => {
      const needsRefresh = localStorage.getItem('resourceListNeedsRefresh')
      if (needsRefresh === 'true') {
        // 检测到评分更新，刷新资源列表
        loadResources()
        localStorage.removeItem('resourceListNeedsRefresh')
      }
    })
    
    // 监听搜索关键词变化
    watch(searchKeyword, (newVal) => {
      if (!newVal) {
        handleSearch()
      }
    })
    
    return {
      // 响应式数据
      loading,
      resources,
      categories,
      total,
      currentPage,
      pageSize,
      viewMode,
      searchKeyword,
      selectedCategory,
      sortBy,
      fileType,
      showUploadDialog,
      uploading,
      uploadForm,
      uploadRules,
      uploadFormRef,
      uploadRef,
      
      // 计算属性
      isLoggedIn,
      
      // 方法
      handleSearch,
      handleFilter,
      handleViewModeChange,
      handleSizeChange,
      handleCurrentChange,
      getFileIcon,
      formatFileSize,
      formatDate,
      viewResourceDetail,
      downloadResource,
      favoriteResource,
      handleResourceAction,
      shareResource,
      handleFileChange,
      beforeUpload,
      submitUpload,
      handleUploadDialogClose
    }
  }
}
</script>

<style scoped>
.resources-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: calc(100vh - 160px);
}

/* 搜索筛选区域 */
.search-filter-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
}

.upload-action {
  flex-shrink: 0;
}

.filter-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
}

.filter-select {
  min-width: 140px;
}

/* 资源内容区域 */
.resources-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.results-info {
  color: #909399;
  font-size: 14px;
}

.loading-container {
  padding: 40px 0;
}

/* 网格视图 */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.resource-card {
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #409eff;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
}

.file-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #409eff;
  border-radius: 8px;
  color: white;
  font-size: 24px;
}

.card-actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.resource-card:hover .card-actions {
  opacity: 1;
}

.more-icon {
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.more-icon:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.card-content {
  padding: 16px 20px;
}

.resource-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.resource-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #909399;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #909399;
  flex-wrap: wrap;
}

.rating-value {
  font-size: 12px;
  color: #ff9900;
  font-weight: 500;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.file-info {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.file-size {
  font-weight: 500;
}

.file-type {
  background: #e1f3d8;
  color: #67c23a;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

/* 列表视图 */
.resources-list {
  margin-bottom: 32px;
}

.list-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-icon-small {
  font-size: 16px;
  color: #409eff;
}

.rating-score {
  color: #ff9900;
  font-weight: 500;
}

.favorited {
  background-color: #ffd04b !important;
  border-color: #ffd04b !important;
  color: #666 !important;
}

.favorited:hover {
  background-color: #ffcd02 !important;
  border-color: #ffcd02 !important;
  color: #666 !important;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resources-container {
    padding: 0 16px;
  }
  
  .search-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .upload-action {
    align-self: center;
  }
  
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .filter-item {
    justify-content: space-between;
  }
  
  .filter-select {
    min-width: 120px;
    flex: 1;
  }
  
  .view-controls {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .search-input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .search-filter-section,
  .resources-content {
    padding: 16px;
  }
  
  .resource-card {
    margin: 0 -4px;
  }
  
  .card-header,
  .card-content,
  .card-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.resource-card {
  animation: fadeInUp 0.6s ease forwards;
}

.resource-card:nth-child(1) { animation-delay: 0.1s; }
.resource-card:nth-child(2) { animation-delay: 0.2s; }
.resource-card:nth-child(3) { animation-delay: 0.3s; }
.resource-card:nth-child(4) { animation-delay: 0.4s; }

/* 上传对话框样式 */
:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-upload-dragger) {
  border-radius: 8px;
  border: 2px dashed #d9d9d9;
  transition: border-color 0.3s ease;
}

:deep(.el-upload-dragger:hover) {
  border-color: #409eff;
}

:deep(.el-upload-dragger .el-icon--upload) {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 16px;
}

:deep(.el-upload__text) {
  color: #606266;
  font-size: 14px;
}

:deep(.el-upload__tip) {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style> 